<h3 style="font-size: 16px">Input Data Karyawan</h3>
<span id="msg-feedback"></span>
<table>
    <tr>
        <td>Nama</td><td>:</td><td><input type="text" size="50" maxlength="150" id="txtNama"/>
            <span id="nama-feedback"></span></td>
    </tr>
    <tr>
        <td>Alamat</td><td>:</td><td><textarea cols="50" rows="5" maxlength="500" id="txtAlamat"></textarea></td>
    </tr>
    <tr>
        <td>Telp</td><td>:</td><td><input type="text" size="30" maxlength="50" id="txtTelp"/></td>
    </tr>
    <tr>
        <td>Email</td><td>:</td><td><input type="text" size="30" maxlength="100" id="txtEmail"/>
            <span id="email-feedback"></span></td>
    </tr>
    <tr>
        <td colspan="3" align="left">
            <div id="captcha-wrap">
                <div class="captcha-box">
                    <img src="captcha/get_captcha.php" alt="" id="captcha" />
                </div>
                <div class="text-box">
                    <label>Type the two words:</label>
                    <input name="captcha-code" type="text" id="captcha-code">
                </div>
                <div class="captcha-action">
                    <img src="captcha/refresh.jpg"  alt="" id="captcha-refresh" />
                </div>
            </div>
        </td>
    </tr>
</table>
<p><input type="button" value="Simpan" id="btnsubmit"/></p>

<script>
    $(document).ready(function() { 

        // refresh captcha
        $('img#captcha-refresh').click(function() {  
		
            change_captcha();
        });
 
        function change_captcha()
        {
            document.getElementById('captcha').src="captcha/get_captcha.php?rnd=" + Math.random();
        }
 
    });
 	
</script>

<script type="text/javascript">
    
    function validateEmail(mail){  
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)){  
            return true
        }else{
            return false  
        }
    }
    
    $(':input').focusin(function(){
        $(this).css('background-color','#ffff99'); 
        $('#email-feedback').html('');
        $('#nama-feedback').html('');
        $('#btnsubmit').removeAttr('disabled');
    });
    $(':input').focusout(function(){
        $(this).css('background-color','#ffffff'); 
    });
    
    $('#txtEmail').blur(function(){
        var _email = $.trim($('#txtEmail').val());
        if(_email!=''){
            if(validateEmail(_email)){
                $.post('page/cek_email.php',{email:_email},function(output){                 
                    if(output>0){
                        $('#email-feedback').html('<font color="red">Email already registered</font>')
                        $('#txtEmail').css('background-color','#ff9999');
                        $('#btnsubmit').attr('disabled', true);
                    }
                });
            }else{
                $('#email-feedback').html('<font color="red">Not valid email</font>')
                $('#txtEmail').css('background-color','#ff9999');
                $('#btnsubmit').attr('disabled', true);
            }
        }else{
            $('#email-feedback').html('<font color="red">Email is required</font>')
            $('#txtEmail').css('background-color','#ff9999');
            $('#btnsubmit').attr('disabled', true);
        }
    });
    
    
    $('#btnsubmit').click(function(){
        var _nama = $('#txtNama').val();
        var _alamat = $('#txtAlamat').val();
        var _telp = $('#txtTelp').val();
        var _email = $.trim($('#txtEmail').val());
        var _captcha = $('#captcha-code').val();
               
        if(_nama==''){
            $('#txtNama').css('background-color','#ff9999');
            $('#nama-feedback').html('<font color="red">Nama is required</font>')
            return false;
        }
        if(_email!=''){           
            if(validateEmail(_email)){
                $.post('page/cek_email.php',{email:_email},function(output){                 
                    if(output>0){
                        $('#email-feedback').html('<font color="red">Email already registered</font>')
                        $('#txtEmail').css('background-color','#ff9999');
                        $('#btnsubmit').attr('disabled', true);
                        return false;
                    }
                });
            }else{
                $('#email-feedback').html('<font color="red">Not valid email</font>')
                $('#txtEmail').css('background-color','#ff9999');
                $('#btnsubmit').attr('disabled', true);
                return false;
            }
        }else{
            $('#email-feedback').html('<font color="red">Email is required</font>')
            $('#txtEmail').css('background-color','#ff9999');
            $('#btnsubmit').attr('disabled', true);
            return false;
        }
        
        
        $.post('page/simpan_karyawan.php',{
            txtNama:_nama,
            txtAlamat:_alamat,
            txtTelp:_telp,
            txtEmail:_email,
            captcha:_captcha
        },function(output){           
            if(output=='true'){
                alert('Data Tersimpan');
                $('#txtNama').val('');
                $('#txtAlamat').val('');
                $('#txtTelp').val('');
                $('#txtEmail').val('');
                $('#captcha-code').val('');
            } else if(output=='false'){
                alert('Data Gagal disimpan');
            } else {
                alert(output);
            }
        }).error(function(){
            alert('Terjadi error');
        });
        
    });
</script>